<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        a.router-link-active.router-link-exact-active {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 直接使用a标签编写的路由导航：不足 地址是固定死的无法动态维护 -->
        <!-- <a href="#/">首页</a>
        <a href="#/video">视频</a>
        <a href="#/music">音乐</a>
        <a href="#/photo">美图</a>
        <a href="#/mine">关于我</a> -->

        <!-- 路由内置指令：router-link 
            优势：灵活处理激活状态样式（提供类），实现路由地址的动态解析，传参
             
            to: 知道需要跳转的路由地址
            replace：通过替换的方式来跳转到另一个路由（不会保留当前访问历史记录，无法实现后退）
        -->
        <!-- to:字符串 -->

        <!-- <router-link to="/">首页</router-link>
        <router-link to="video">视频</router-link>
        <router-link to="music">音乐</router-link>
        <router-link to="photo">美图</router-link>
        <router-link to="mine">关于我</router-link> -->

        <!-- 使用v-bind 来绑定动态的路由地址 -->
        <!-- <router-link v-for="(value,key) in routes" :to="key">{{value}}</router-link> -->
       
        <!-- <router-link v-for="(value,key) in routes" :to="{path:key}">{{value}}</router-link> -->
        
        <!-- 使用具名路由,可以实现路由传参 =》路由内部传参 -->
        <!-- <router-link :to="{name:'home',params:{a:100}}">首页</router-link>
        <router-link :to="{name:'video',params:{a:101}}">视频</router-link>
        <router-link :to="{name:'music',params:{a:102}}">音乐</router-link>
        <router-link :to="{name:'photo',params:{a:103}}">美图</router-link>
        <router-link :to="{name:'mine',params:{a:104}}">关于我</router-link> -->
         
        <!-- 使用具名路由,可以实现路由传参 =》路由query（查询字符串）传参 -->
        <router-link :to="{name:'home',query:{a:100}}">首页</router-link>
        <router-link :to="{name:'video',query:{a:101}}" replace>视频</router-link>
        <router-link :to="{name:'music',query:{a:102}}">音乐</router-link>
        <router-link :to="{name:'photo',query:{a:103}}">美图</router-link>
        <router-link :to="{name:'mine',query:{a:104}}">关于我</router-link>

        <router-view></router-view>
    </div>

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/vue-router.js"></script>
    <script>
        // 1.先为路由页面创建组件
        const Home = {
            template: `<div>这是首页</div>`
        }
        const Video = {
            template: `<div>这是视频</div>`
        }
        const Music = {
            template: `<div>这是音乐</div>`
        }
        const Photo = {
            template: `<div>这是美图</div>`
        }
        const Mine = {
            template: `<div>这是关于我</div>`
        }
        // 2.创建路由表
        const routes = [
            {
                name:"home",
                path: "/",
                component: Home
            },
            {
                name:"video",
                path: "/video",
                component: Video
            },
            {
                name:"music",
                path: "/music",
                component: Music
            },
            {
                name:"photo",
                path: "/photo",
                component: Photo
            },
            {
                name:"mine",
                path: "/mine",
                component: Mine
            }
        ];
        // 3.创建vue路由对象
        const router = new VueRouter({
            routes
        })

        //vm 就是根组件
        let vm = new Vue({
            el: "#app",//指定Vue挂载的DOM
            data: {//当前vue实例中使用的数据
                routes: {
                    "/": "首页",
                    "/video": "视频",
                    "/music": "音乐",
                    "/photo": "美图",
                    "/mine": "关于我"
                }

            },
            router,// 4. 将vue路由对象挂载到对应的vue实例对象
            methods: {//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>

</html>